<template>
    <el-dialog :visible="is_show" :before-close="handleClose" title="转让超级管理员">
        <el-form :model="form" label-width="100px" class="demo-dynamic">
            <el-form-item label="新管理员：">
                <el-select v-model="form.userId" filterable placeholder="请输入搜索" class="attorn-select" id="attorn-select">
                    <el-option v-for="item in user_list" :key="item.id" :label="item.label" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="验证码：">
                <el-input class="inline-input" v-model="form.code"></el-input>
                <el-button type="primary" @click="getCode" :disabled="button_text.includes('s')">{{button_text}}</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import role from "@/api/role.js";

export default {
    name: "attorn-supermanager",
    props: ["is_show"],
    data() {
        return {
            form: {
                userId: undefined,
                code: undefined
            },
            user_list: undefined,
            button_text: '获取验证码',
            count: 60
        };
    },
    methods: {
        handleClose() {
            this.form.userId = undefined
            this.form.code = undefined
            this.$emit("attornSuperManager", false);
        },
        setTime() {
            if (this.count === 0) {
                this.button_text = '获取验证码'
                return false
            } else {
                this.button_text = '重新发送' + this.count + 's';
                this.count --
            }
            setTimeout(() => {
                this.setTime()
            }, 1000)
        },
        getCode() {
            role.getCode().catch(err => {
                this.$message.error(err);
            });
            this.setTime()
        },
        onSubmit() {
            role.attornSuperManager(this.form).then(res => {
                this.$message({
                    type: 'success',
                    message: '转让成功!'
                })
                this.handleClose()
            }).catch(err => {
                this.$message.error(err)
                this.handleClose()
            })
        }
    },
    watch: {
        is_show(newVal) {
            if (newVal) {
                role.getAllUser().then(res => {
                    this.user_list = res;
                });
            }
        }
    }
};
</script>

<style>
.inline-input {
    width: 270px;
}

.attorn-select {
    width: 200px;
}

#attorn-select .el-input__inne{
    cursor: not-allowed;
}
.el-select .el-input__inner {
    pointer-events: none;
}
</style>
